<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>启迪之星 OA 智能助手 - 极速审批体验</title>
  <meta name="description" content="Chrome/Edge 扩展：一键自动填写 24 种审批表单，PDF 自动转图片上传，申请单详情极速预览。">
  <link rel="icon" href="icons/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-body: #0B0E14;
      --bg-card: rgba(30, 41, 59, 0.4);
      --bg-card-hover: rgba(30, 41, 59, 0.6);
      --border-color: rgba(255, 255, 255, 0.08);
      --border-hover: rgba(255, 255, 255, 0.2);
      --primary: #3B82F6;
      --primary-glow: rgba(59, 130, 246, 0.4);
      --text-main: #FFFFFF;
      --text-secondary: #94A3B8;
      --text-dim: #64748B;
      --accent-gradient: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    }

    * { box-sizing: border-box; }
    
    body {
      margin: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-body);
      background-image: 
        radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(124, 58, 237, 0.08), transparent 25%);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a { text-decoration: none; color: inherit; transition: color 0.2s; }
    a:hover { color: var(--primary); }

    /* Layout */
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Header */
    header {
      padding: 24px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 10;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 18px;
    }
    .logo img {
      width: 32px;
      height: 32px;
      border-radius: 8px;
    }
    .header-links a {
      font-size: 14px;
      color: var(--text-secondary);
      margin-left: 24px;
    }
    .header-links a:hover { color: var(--text-main); }

    /* Hero Section */
    .hero {
      text-align: center;
      padding: 80px 0 60px;
      position: relative;
    }
    
    .version-pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-color);
      border-radius: 999px;
      font-size: 12px;
      color: var(--primary);
      margin-bottom: 24px;
      font-weight: 500;
    }

    h1 {
      font-size: 56px;
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 24px;
      background: linear-gradient(to bottom right, #ffffff 30%, #94a3b8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .subtitle {
      font-size: 18px;
      color: var(--text-secondary);
      max-width: 600px;
      margin: 0 auto 40px;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--primary);
      color: white;
      font-weight: 600;
      font-size: 16px;
      padding: 16px 32px;
      border-radius: 12px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px var(--primary-glow);
    }
    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px var(--primary-glow);
      color: white;
    }

    .browser-mockup {
      margin-top: 60px;
      background: #1e293b;
      border-radius: 12px;
      box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--border-color);
      overflow: hidden;
      position: relative;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .browser-header {
      background: rgba(15, 23, 42, 0.8);
      padding: 12px 16px;
      display: flex;
      gap: 8px;
      border-bottom: 1px solid var(--border-color);
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .dot.red { background: #EF4444; }
    .dot.yellow { background: #F59E0B; }
    .dot.green { background: #10B981; }
    .browser-content img {
      display: block;
      width: 100%;
      height: auto;
      opacity: 0.9; /* 稍微暗一点融入背景 */
    }

    /* Features Grid */
    .features {
      padding: 80px 0;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 32px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
    }
    .card:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-hover);
      transform: translateY(-4px);
    }
    .card.wide {
      grid-column: span 2;
    }
    .card-icon {
      font-size: 32px;
      margin-bottom: 20px;
      background: rgba(59, 130, 246, 0.1);
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      color: var(--primary);
    }
    .card h3 {
      margin: 0 0 12px;
      font-size: 20px;
      font-weight: 600;
    }
    .card p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.6;
    }

    /* Installation Section */
    .install-section {
      padding: 60px 0 100px;
    }
    .section-title {
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .section-desc {
      text-align: center;
      color: var(--text-secondary);
      margin-bottom: 60px;
    }
    
    .timeline {
      display: flex;
      justify-content: space-between;
      position: relative;
      max-width: 800px;
      margin: 0 auto;
    }
    .timeline::before {
      content: '';
      position: absolute;
      top: 24px;
      left: 50px;
      right: 50px;
      height: 2px;
      background: var(--border-color);
      z-index: 0;
    }
    .step {
      position: relative;
      z-index: 1;
      flex: 1;
      text-align: center;
      padding: 0 10px;
    }
    .step-num {
      width: 48px;
      height: 48px;
      background: #1e293b;
      border: 2px solid var(--border-color);
      color: var(--text-secondary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-weight: 700;
      transition: all 0.3s;
    }
    .step:hover .step-num {
      border-color: var(--primary);
      color: var(--primary);
      box-shadow: 0 0 15px var(--primary-glow);
    }
    .step h4 { margin: 0 0 8px; font-size: 16px; }
    .step p { margin: 0; font-size: 13px; color: var(--text-dim); }

    /* Copy Command Block */
    .copy-block {
      background: #000;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 16px;
      font-family: 'Menlo', monospace;
      font-size: 13px;
      color: #a5b4fc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      cursor: pointer;
      transition: border 0.2s;
    }
    .copy-block:hover { border-color: var(--primary); }
    .copy-icon { opacity: 0.5; }

    /* Ticker */
    .ticker-wrap {
      width: 100%;
      overflow: hidden;
      background: rgba(0,0,0,0.3);
      padding: 20px 0;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
    }
    .ticker {
      display: inline-block;
      animation: ticker 60s linear infinite;
    }
    .ticker-item {
      display: inline-block;
      padding: 0 24px;
      font-size: 14px;
      color: var(--text-dim);
      font-weight: 500;
    }
    @keyframes ticker {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-50%, 0, 0); }
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 60px 0;
      color: var(--text-dim);
      font-size: 14px;
      border-top: 1px solid var(--border-color);
      margin-top: 0px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      h1 { font-size: 36px; }
      .grid { grid-template-columns: 1fr; }
      .card.wide { grid-column: span 1; }
      .timeline { flex-direction: column; gap: 32px; }
      .timeline::before { display: none; }
      .step { text-align: left; display: flex; gap: 16px; }
      .step-num { margin: 0; flex-shrink: 0; }
    }

    /* Utility */
    .hidden { display: none; }
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: white;
      padding: 8px 16px;
      border-radius: 99px;
      font-size: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .toast.show { opacity: 1; }
  </style>
</head>
<body>

  <div class="container">
    <header>
      <div class="logo">
        <img src="icons/android-icon-192x192.png" alt="Logo">
        <span>Tusstar OA Helper</span>
      </div>
      <div class="header-links">
        <a href="README.md">功能列表</a>
        <a href="https://gitee.com/xxdxxdxxd/tusstar-oa" target="_blank">Gitee 源码</a>
      </div>
    </header>

    <section class="hero">
      <div class="version-pill">
        <span id="version-tag">v<span id="version-number">...</span> 更新已就绪</span>
      </div>
      <h1>审批流程，<br>从此极速丝滑。</h1>
      <p class="subtitle">一键自动填写 24 种审批表单，PDF 自动转图片上传，申请单详情页极速预览。让繁琐的 OA 系统变得简单好用。</p>
      
      <a id="download-btn" href="oa-extension.zip" class="cta-button" download>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        下载最新版插件 <span id="version-download" style="font-size: 0.9em; opacity: 0.8; font-weight: 400;">(Loading)</span>
      </a>

      <div class="browser-mockup">
        <div class="browser-header">
          <div class="dot red"></div>
          <div class="dot yellow"></div>
          <div class="dot green"></div>
        </div>
        <div class="browser-content">
          <img src="images/tusstar-oa-demo.gif" alt="Demo">
        </div>
      </div>
    </section>

    <section class="features">
      <div class="grid">
        <div class="card wide">
          <div class="card-icon">⚡️</div>
          <h3>智能一键填充</h3>
          <p>支持财务、人事、行政等 24 种常用表单。只需手动填写一次并保存配置，下次即可一键自动填入人员和部门信息，效率提升 90%。</p>
        </div>
        <div class="card">
          <div class="card-icon">🖼️</div>
          <h3>PDF 自动转图片</h3>
          <p>上传 PDF 文件自动转换为高清图片并压缩。支持多页 PDF 自动分批上传，告别手动截图。</p>
        </div>
        <div class="card">
          <div class="card-icon">👁️</div>
          <h3>详情极速预览</h3>
          <p>在“我的申请单”列表页，直接透视每一行的核心详情。无需逐个点击跳转，状态信息一目了然。</p>
        </div>
        <div class="card wide">
          <div class="card-icon">🔄</div>
          <h3>配置导入导出</h3>
          <p>支持将保存的表单配置导出为 JSON 文件，轻松在不同电脑间同步你的个性化设置，或分享给同事使用。</p>
        </div>
      </div>
    </section>

    <section class="install-section">
      <h2 class="section-title">3 步极简安装</h2>
      <p class="section-desc">支持 Chrome, Edge, 夸克, 360 等所有 Chromium 内核浏览器</p>

      <div class="timeline">
        <div class="step">
          <div class="step-num">1</div>
          <h4>下载插件</h4>
          <p>点击上方按钮下载 ZIP 包，无需解压。</p>
        </div>
        <div class="step">
          <div class="step-num">2</div>
          <h4>打开扩展页</h4>
          <p>复制下方地址到浏览器地址栏打开：</p>
          
          <div class="copy-block" onclick="copy('chrome://extensions/')">
            <span>chrome://extensions/</span>
            <span class="copy-icon">📋</span>
          </div>
          <div class="copy-block" onclick="copy('edge://extensions/')">
            <span>edge://extensions/</span>
            <span class="copy-icon">📋</span>
          </div>
          <p style="margin-top:8px; font-size:12px; color:#ef4444;">* 记得开启扩展页的  「开发者模式」</p>
        </div>
        <div class="step">
          <div class="step-num">3</div>
          <h4>拖拽安装</h4>
          <p>将下载的 .zip 文件拖入扩展页面即可。</p>
        </div>
      </div>
    </section>
  </div>

  <div class="ticker-wrap">
    <div class="ticker">
      <span class="ticker-item">财务审批表</span> <span class="ticker-item">采购审批表</span> <span class="ticker-item">采购需求表</span>
      <span class="ticker-item">用印章审批表</span> <span class="ticker-item">借印章审批表</span> <span class="ticker-item">人员需求申请表</span>
      <span class="ticker-item">供应商评审表</span> <span class="ticker-item">其他审批表</span> <span class="ticker-item">出境考察申请表</span>
      <span class="ticker-item">出差任务审批表</span> <span class="ticker-item">员工休假审批单</span> <span class="ticker-item">品牌加盟申请审批</span>
      <span class="ticker-item">大型活动预算/决算表</span> <span class="ticker-item">实习/正式员工录用审批表</span> <span class="ticker-item">活动品牌使用审批</span>
      <span class="ticker-item">用车登记申请表</span> <span class="ticker-item">离职/续签审批表</span> <span class="ticker-item">装修合同/工程需求表</span>
      <!-- 重复一遍以实现无缝滚动 -->
      <span class="ticker-item">财务审批表</span> <span class="ticker-item">采购审批表</span> <span class="ticker-item">采购需求表</span>
      <span class="ticker-item">用印章审批表</span> <span class="ticker-item">借印章审批表</span> <span class="ticker-item">人员需求申请表</span>
      <span class="ticker-item">供应商评审表</span> <span class="ticker-item">其他审批表</span> <span class="ticker-item">出境考察申请表</span>
      <span class="ticker-item">出差任务审批表</span> <span class="ticker-item">员工休假审批单</span> <span class="ticker-item">品牌加盟申请审批</span>
      <span class="ticker-item">大型活动预算/决算表</span> <span class="ticker-item">实习/正式员工录用审批表</span> <span class="ticker-item">活动品牌使用审批</span>
      <span class="ticker-item">用车登记申请表</span> <span class="ticker-item">离职/续签审批表</span> <span class="ticker-item">装修合同/工程需求表</span>
    </div>
  </div>

  <footer>
    <p>Designed by Shu Peian · <span id="version-footer">Loading...</span></p>
  </footer>

  <div id="toast" class="toast">已复制到剪贴板</div>

  <script>
    (function(){
      // Version Sync
      function syncVersionFromManifest(){
        fetch('manifest.json')
          .then(res => res.json())
          .then(manifest => {
            const ver = manifest.version;
            if(ver){
              ['version-number', 'version-footer', 'version-download'].forEach(id => {
                const el = document.getElementById(id);
                if(el) el.textContent = ver;
              });
              const btn = document.getElementById('download-btn');
              if(btn) btn.href = 'build/v' + ver + '/oa-extension-' + ver + '.zip';
            }
          })
          .catch(e => console.warn('Version check failed', e));
      }
      
      // Copy Function
      window.copy = function(text){
        navigator.clipboard.writeText(text).then(() => {
          showToast('已复制: ' + text);
        }).catch(() => {
          alert('请手动复制:\n' + text);
        });
      }

      function showToast(msg) {
        const t = document.getElementById('toast');
        t.textContent = msg;
        t.classList.add('show');
        setTimeout(() => t.classList.remove('show'), 2000);
      }

      document.addEventListener('DOMContentLoaded', syncVersionFromManifest);
    })();
  </script>
</body>
</html>
